<template>
<el-container>
  <div class="login-container">
    <p class="text-password">PASSWORD</p>
    <p class="text-login">LOGIN</p>
    <div class="header1" v-if="active === 1">
      <h1>密码找回</h1>
    </div>
    <el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" label-position="left" v-if="active === 1">
      <el-row class="row1">
        <el-col>
          <el-form-item class="mobile" prop="phone"><span class="svg-container">
              <svg-icon icon-class="mobile"></svg-icon></span>
            <el-input type="text" name="phone" auto-complete="on" placeholder="请输入手机号" style="width: 93%;" v-model="loginForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row2">
        <el-col>
          <el-form-item class="verificationCode" prop="verificationCode"><span class="svg-container">
              <svg-icon icon-class="encryptedString"></svg-icon></span>
            <el-input type="text" name="verificationCode" auto-complete="on" placeholder="请输入验证码" style="width: 65%;" v-model="loginForm.verificationCode"></el-input>
            <el-button size="small" style="width: 24%;" @click="sendVerificationCode" ref="sendCodeText">发送验证码</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row3">
        <el-col>
          <el-form-item class="account" prop="loginname"><span class="svg-container">
              <svg-icon icon-class="account"></svg-icon></span>
            <el-input type="text" name="loginname" auto-complete="on" placeholder="请输入账号" style="width: 93%;" v-model="loginForm.loginname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row4">
        <el-col>
          <el-form-item class="password" prop="password"><span class="svg-container">
              <svg-icon icon-class="lock"></svg-icon></span>
            <el-input type="password" name="password" auto-complete="on" placeholder="请输入新密码" style="width: 93%;" v-model="loginForm.password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row5">
        <el-col>
          <el-form-item class="confirmPassword" prop="confirmPassword"><span class="svg-container">
              <svg-icon icon-class="lock"></svg-icon></span>
            <el-input type="password" name="confirmPassword" auto-complete="on" placeholder="请确认新密码" style="width: 93%;" v-model="loginForm.confirmPassword" @keyup.enter.native="toPasswordReset"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row6">
        <el-col>
          <el-form-item class="button">
            <el-button size="small" type="primary" @click="toPasswordReset('loginForm')">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</el-container>
</template>

<script>
import { initializationForgetPassword, checkPasswordAndSendCheckCode, changePassword } from '@/api/getData'
import { decryptDes } from '@/utils/utils'

export default {
  name: 'ForgetPassword',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === this.loginForm.password) {
        callback()
      } else {
        callback(new Error('两次输入的密码不一致！'))
      }
    }
    return {
      url: '',
      onOff: false,
      uuid: '',
      uid: '',
      active: 1,
      loginForm: {
        phone: '',
        verificationCode: '',
        loginname: '',
        password: '',
        confirmPassword: ''
      },
      loginRules: {
        phone: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
        verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
        loginname: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入新密码' }],
        confirmPassword: [
          { required: true, trigger: 'blur', message: '请确认新密码' },
          { validator: validatePass }
        ]
      },
      loading: false
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const returnData = await initializationForgetPassword({
      })
      if (returnData._result) {
        this.uid = decryptDes(returnData.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
      }
    },
    async sendVerificationCode() {
      if (!this.loginForm.phone) {
        this.$message({ message: '请输入手机号', type: 'error' })
      } else {
        const returnData = await checkPasswordAndSendCheckCode({
          uid: this.uid,
          phone: this.loginForm.phone
        })
        //console.log(returnData)
        if (returnData._result) {
          this.uuid = returnData.data
          if (returnData.data === '' || returnData.data === null) {
            this.$message({ message: '电话号码不存在', type: 'error' })
          } else {
            let count = 60
            this.$refs.sendCodeText.$el.innerText = `验证码已发送，剩余${count--}秒`
            const BtnMsg = setInterval(() => {
              this.$refs.sendCodeText.$el.innerText = `验证码已发送，剩余${count--}秒`
              this.onOff = false
              if (count === 0) {
                clearInterval(BtnMsg)
                this.$refs.sendCodeText.$el.innerText = '发送验证码'
                this.onOff = true
              }
            }, 1000)
          }
        }
      }
    },
    toPasswordReset(loginForm) {
      this.$refs[loginForm].validate(async valid => {
        if (valid) {
          const returnData = await changePassword({
            phone: this.loginForm.phone,
            uid: this.uuid,
            msgCode: this.loginForm.verificationCode,
            loginname: this.loginForm.loginname,
            password: this.loginForm.password
          })
          if (returnData._result) {
            this.$message({ message: '密码重置成功', type: 'error' })
            this.$router.push({ path: '/' })
          } else {
            this.$message({ message: '密码重置失败', type: 'error' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  //background: url("../../assets/images/big_bg.jpg");

  .login-container {
    position: relative;
    width: 692px;
    height: 500px;
    margin: auto auto;
    background: white;
    box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius:5px;

    .text-password {

      position: absolute;
      left: 50px;
      top: -30px;
      display: inline-block;
      font-size: 72px;
      color: #f8f9f9 !important;
      font-family: 微软雅黑;
      z-index: 1;
      user-select:none
    }

    .text-login {
      position: absolute;
      right: 50px;
      top: 70px;
      display: inline-block;
      font-size: 96px;
      color: #f8f9f9 !important;
      font-family: 微软雅黑;
      z-index: 1;
      user-select:none
    }

    .header1 {
      width: 692px;
      position: absolute;
      top: 0;
      z-index: 2;
      h1 {
        font-family: 微软雅黑;
        text-align: center;
        color: #7f8182;
        margin-top: 30px;
      }
    }

    .el-form {
      width: 100%;
      z-index: 2;

      .row1 {
        margin-top: 80px;

        .mobile /deep/ .el-form-item__content {
          display: flex;
          justify-content: center;
        }

        .svg-container {
          font-size: 20px;
          color: #cccccc;
          position: relative;
          left: 1.1rem;
        }

        .mobile /deep/ .el-form-item__error {
          margin-left: 4.7rem;
        }

        .el-input {
          margin-right: 1rem;
        }

        .el-input /deep/ input {
          border: none;
          border-bottom: 1px solid #ccc;
          border-radius: 0;
          background: transparent;
          text-indent: 2em;
        }
      }

      .row2 {
        margin-top: 30px;

        .verificationCode /deep/ .el-form-item__content {
          display: flex;
          justify-content: center;
        }

        .svg-container {
          font-size: 20px;
          color: #cccccc;
          position: relative;
          left: -0.15rem;
        }

        .el-button.el-button--default.el-button--small {
          position: relative;
          right: -0.4rem;
        }

        .verificationCode /deep/ .el-form-item__error {
          margin-left: 4.7rem;
        }

        .el-input {
          position: relative;
          left: -1.3rem;
        }

        .el-input /deep/ input {
          border: none;
          border-bottom: 1px solid #ccc;
          border-radius: 0;
          background: transparent;
          text-indent: 2em;
        }
      }

      .row3 {
        margin-top: 30px;

        .account /deep/ .el-form-item__content {
          display: flex;
          justify-content: center;
        }

        .svg-container {
          font-size: 20px;
          color: #cccccc;
          position: relative;
          left: 1.2rem;
        }

        .account /deep/ .el-form-item__error {
          margin-left: 4.7rem;
        }

        .el-input {
          margin-right: 1rem;
        }

        .el-input /deep/ input {
          border: none;
          border-bottom: 1px solid #ccc;
          border-radius: 0;
          background: transparent;
          text-indent: 2em;
        }
      }

      .row4 {
        margin-top: 30px;

        .password /deep/ .el-form-item__content {
          display: flex;
          justify-content: center;
        }

        .svg-container {
          font-size: 20px;
          color: #cccccc;
          position: relative;
          left: 1.2rem;
        }

        .password /deep/ .el-form-item__error {
          margin-left: 4.7rem;
        }

        .el-input {
          margin-right: 1rem;
        }

        .el-input /deep/ input {
          border: none;
          border-bottom: 1px solid #ccc;
          border-radius: 0;
          background: transparent;
          text-indent: 2em;
        }
      }

      .row5 {
        margin-top: 30px;

        .confirmPassword /deep/ .el-form-item__content {
          display: flex;
          justify-content: center;
        }

        .svg-container {
          font-size: 20px;
          color: #cccccc;
          position: relative;
          left: 1.2rem;
        }

        .confirmPassword /deep/ .el-form-item__error {
          margin-left: 4.7rem;
        }

        .el-input {
          margin-right: 1rem;
        }

        .el-input /deep/ input {
          border: none;
          border-bottom: 1px solid #ccc;
          border-radius: 0;
          background: transparent;
          text-indent: 2em;
        }
      }

      .row6 {
        margin-top: 20px;

        .button /deep/ .el-form-item__content {
          display: flex;
          justify-content: flex-end;
          margin-right: 1.35rem;
        }
      }
    }
  }
}
.el-container .login-container .el-form .el-form-item {
  margin: 0 auto;
}
</style>
